<template>
	<div>
		  <div class="index_header" style="" >
          	<span>拉活后台管理</span>
      </div>
      <el-menu
        mode="vertical"
        default-active="1"
        menu-trigger="click"
        background-color="#ffffff"
        text-color="#C1CAD6"
        active-text-color="#3661FF"
        @open="handleOpen"
        @close="handleClose">
        
        <el-menu-item index="1">
         <router-link to="/Index"><span style="margin-left: 50px;">积分任务</span></router-link>
        </el-menu-item>
       
	      <el-menu-item index="2" >
	         <router-link to="/WelfareTask"><span style="margin-left: 50px;">福利任务</span></router-link>
	      </el-menu-item>
		    <el-menu-item index="3"  class='el-submenu'>
			    <router-link to="/UserGroup"><span style="margin-left: 50px;">用户组</span></router-link>
		    </el-menu-item>
		    <el-menu-item index="4"  class='el-submenu'>
			    <router-link to="/myStore"><span style="margin-left: 50px;">我的店铺</span></router-link>
		    </el-menu-item>
	    </el-menu>
	</div>
			  
       
</template>
<script>
export default {
  	name:'Nav',
  	mounted(){
  		// this.tableData()
    },
    data(){
    	return {
    		msg:'测试',
    		isCollapse:true,
    		isOpen:false,
    		isClose:false,
    	}
    },
    methods:{
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
    }
}
</script>
<style scoped>
	.index_header{
		font-size: 16px;
		color: #FFFFFF;
		text-align: center;
		background: #3185FF;
		height: 60px;
		line-height: 60px;
	}
	.el-menu{
		height: 100%;
		font-family: 'Open Sans', sans-serif
	}
  .el-submenu .el-menu-item {
    min-width: 0;
  }
  
  .circle_icon {
    width: 6px;
    height: 6px;
    border-radius: 6px;
    background: #A1AAB4;
    display: inline-block;
    margin-right: 10px;
  }
   .el-menu-item.is-active .circle_icon {
    background: #FFFFFF;
  }
  .el-menu-item a{
  	text-decoration: none;
  	color: #000000;
  	font-size: 16px;
  }
  .navBtn{
  	background: none;
  	border: none;
  }
  .is-vertical{
  	width: 60%;
  }
  .el-menu-item a{
  	display: inline-block;
  	height: 56px;
  	line-height: 50px;
  	width: 100%;
  }
  .menu_icon_p img{
  	width: 21px;
  	height: 20px;
  	margin-right: 44px;
  }
  .el-menu-item.is-active{
  	background:#ECF5FF!important;
  
  }
 .el-menu-item.is-active .router-link-active{
  		color: #3185FF!important;
  }
</style>
